// 基本颜色
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
$grey:#dfe6ec;

/********************* element ui 默认主题颜色方案 *********************/
// 这是element ui默认主题，用于开发使用或配色参考，若自定义主题配色在element-variable.scss
// 主题颜色
$color-primary:#409EFF;
$color-regular: rgb(217, 236, 255);
$color-secondary: rgb(236, 245, 255);
// 功能性颜色
$color-success: #67C23A;// 成功
$color-warning: #E6A23C;// 警告
$color-danger: #F56C6C;// 危险
$color-info: #909399;// 提示信息 
// 字体颜色
$color-text-primary: #303133;// 主要
$color-text-regular: #606266;// 常规
$color-text-secondary: #909399; // 次要
$color-text-placeholder: #C0C4CC;// 占位颜色
// 边框颜色
$border-color-base: #DCDFE6;// 一级边框
$border-color-light:#E4E7ED;// 二级边框
$border-color-lighter: #EBEEF5;// 三级边框
$border-color-extra-light: #F2F6FC; // 四级边框
// 背景颜色
$color-white: #FFFFFF; // 基础白
$color-black: #000000; // 基础黑
$background-color-base: #eceef1;// 基础背景色
// 新增自定义灰度背景
$background-color-primary: $color-text-primary;
$background-color-regular: $color-text-regular;
$background-color-secondary: $color-text-secondary;
$background-color-extra: #F5F7FA; 
$background-color-extra-blue:#ecf5ff;

/********************* 表格相关 *********************/

// 常用：适用于th、td背景、边框的设置
$table-td-bg: $background-color-extra; 
$table-td-hover-bg: $background-color-extra; // 滑过时背景
$table-td-active-bg: $color-regular; // 选中时背景
$table-td-border: $border-color-lighter;

/********************* 表单相关 *********************/
$form-element-border: $border-color-base;
$form-element-hover-border: $color-text-placeholder;
$form-element-bg: $background-color-base;


// sidebar 侧边菜单
$menuText:#bfcbd9;
$menuActiveText:$color-primary;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$sideBarWidth: 241px;

// avatar 头像
$avatarHoverBg: $color-regular;

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}
